<template>
	<view class="information-list-page">
		<!--标题栏-->
		<bar-title  bgColor='bg-white'>
			<block slot="content">行业资讯</block>
		</bar-title>

		<view class="container">
			<view class="information-list">
				<block v-for="(article, index) in articleList" :key="index">
					<viewMessage :article="article"></viewMessage>
				</block>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
import { Article } from '@/models/article.js';
import viewMessage from '@/components/box/ViewMessage.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
export default {
	name: 'information',
	components: {
		viewMessage,
		uniLoadMore
	},
	data() {
		return {
			pagenum: 1,
			loadingType: 'more',
			articleList:[]
		}
	},
	onLoad() {
		this.getArticleList(this.pagenum)
	},
	methods: {
		async getArticleList(pagenum) {
			this.loadingType = 'loading'
			let articleList =  await Article.getArticleCommend(pagenum)
			this.articleList = this.articleList.concat(articleList)
			if (!articleList.length) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
		}
	},
	onReachBottom(e) {
		if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
		    return
		}
		this.pagenum = this.pagenum + 1
		this.getArticleList(this.pagenum)
	},
}
</script>
<style lang="scss" scoped>
	page, .information-list-page{
		background: #FFFFFF;
		min-height: 100%;
	}
	.information-box{
		padding-top: 30rpx;
		margin: 0 30rpx;
		border-radius: 20rpx;
	}
	.information{
		background-color: #F7F9FF;
		.information-img{
			width: 100%;
			height: 300rpx;
			border-radius: 20rpx;
		}
		.information-info{
			padding: 30rpx;
			font-size: 28rpx;
			color: #BBBBBB;
			.time-box,.address-box{
				display: flex;
				align-items: center;
				margin-top: 16rpx;
			}
			.title{
				font-weight: 700;
				color: #000000;
				font-size: 30rpx;
			}
			.icon{
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>

